<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-info4-widget" :style="getStyle('head')">
      <!--科室-->
      <div class="dept">
        <ScrollX>
          {{ getRoomDiffInfo || '\u00a0' }}
        </ScrollX>
      </div>
      <!--诊室-->
      <div class="room">
        <ScrollX>
          {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || '\u00a0' }}
        </ScrollX>
      </div>

      <!--医生信息-->
      <template v-for="item in getRoomDoctorInfo">
        <div class="doctor-info">
          <div class="name">
            <ScrollX>{{ (item.workerName) || '\u00a0' }}</ScrollX>
          </div>
          <div class="degree">
            <ScrollX>{{ (item.workerTitle) || '\u00a0' }}</ScrollX>
          </div>
        </div>
        <!--患者信息-->
        <div class="patient-info">
          <div class="item current-patient flex-box">
            <div class="title flex-box-left">{{ optionsInfo['currentPatientContent']  || '当前患者' }}</div>
            <div class="content flex-box-right" :class="{'current-patient-info': scrollInfo(item)}">
              <div class="scroll-info" v-if="scrollInfo(item)">
                <vue-seamless-scroll
                  class="scroll"
                  :key="currKey"
                  :ref="`scroll-${item.workerId}`"
                  @ScrollEnd="(e)=>handleScrollEnd(e, 'curr')"
                  :class-option="optionScroll2"
                  :data="(item.treatingPatient)"
                >
                  <template v-for="PatientItem in (item.treatingPatient)">
                    <p class="item">
                      {{ (PatientItem.patientName) || '&nbsp;' }}
                      <span v-if="PatientItem.orderNo">({{ (PatientItem.orderNo) || '&nbsp;' }})</span>
                    </p>
                  </template>
                </vue-seamless-scroll>
              </div>
              <p class="no-scroll-info" v-else>
                <template v-for="PatientItem in (item.treatingPatient)">
                  {{ (PatientItem.patientName) || '&nbsp;' }}
                   <span v-if="PatientItem.orderNo" :key="PatientItem.orderNo">({{ (PatientItem.orderNo) || '&nbsp;' }})</span>
                </template>
              </p>
            </div>
          </div>

          <div class="item wait-patient flex-box"
               :class="getPatientClassName('wait-patient',item)">
            <div class="title flex-box-left">{{ optionsInfo['waitingPatientContent'] || '等候患者' }}</div>
            <template v-if="waitPatientTypeInfo ===1">
              <div class="content flex-box-right">
                <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                   :key="`${item2.patientIdNo}-${index}`">
                  {{ item2.patientName || '&nbsp;' }} <span v-if="item2.orderNo">({{ item2.orderNo || '&nbsp;' }})</span>
                </p>
              </div>
            </template>
            <template v-else-if="waitPatientTypeInfo ===2">
              <div class="content flex-box-right scroll-area"
                   :class="{'scroll-area-all': getWaitingPatientList(item.waitingPatientList).length>4 }">
                <template
                  v-if="(optionsInfo.openScroll)&&(optionsInfo.waitPatientNumber)>4">
                  <vue-seamless-scroll
                    class="scroll"
                    :key="widgetKey"
                    :ref="`scroll-${item.workerId}`"
                    @ScrollEnd="(e)=>handleScrollEnd(e, 'wait')"
                    :class-option="optionScroll"
                    :data="getWaitingPatientList(item.waitingPatientList)"
                  >
                    <div class="inside-content" :class="getWaitPatientNumber((item.waitingPatientList), true)">
                      <div class="patient"
                           v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                           :key="`${(item2.queuingId) || index}-${(item2.patientIdNo) || index}`"
                      >
                        <template>
                          {{ item2.patientName || '' }}
                        </template>
                          <span class="patient-orderNo" v-if="!!(item2.orderNo)">
                            ({{ item2.orderNo }})
                          </span>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </template>
                <template v-else>
                  <div class="no-scroll-area" :class="getWaitPatientNumber((item.waitingPatientList), false)">
                    <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                       :key="`${item2.patientIdNo}-${index}`">
                      {{ item2.patientName || '&nbsp;' }} <span v-if="item2.orderNo">({{ item2.orderNo || '&nbsp;' }})</span>
                    </p>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </CompOperate>
</template>

<script>
import {pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {NoticeBar, Swipe, SwipeItem} from "vant";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue';
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import {v4 as uuid} from "uuid";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-info4-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      states: true,
      widgetKey: uuid(),
      currKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      code1: require("@a/images/design/placeholder-code.png"),
    }
  },

  computed: {
    // 候诊列表等待--滚动设置
    optionScroll() {
      let {openScroll, waitPatientScrollNumber, waitPatientStep} = (this.optionsInfo)
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: openScroll ? waitPatientScrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    optionScroll2() {
      let {waitPatientStep} = (this.optionsInfo)
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 判断候诊模式
    waitPatientTypeInfo() {
      let {waitPatientType = 1} = this.optionsInfo;
      return waitPatientType
    },

    // 判断当前患者是否滚动
    scrollInfo() {
      return function (info) {
        return !!(info.treatingPatient) && (info.treatingPatient.length) > 1
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(info.headHeight));
            Reflect.set(Obj, 'backgroundColor', `${(info.backgroundColor)}`);
            return Obj;
          case 'currentFontSize':
            Reflect.set(Obj, 'fontSize', pxToVw(info.currentFontSize));
            return Obj;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(info.imageHeight));
            Reflect.set(Obj, 'width', pxToVw(info.imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(info.imageRadius));
            return Obj;
          case 'doctorName':
            Reflect.set(Obj, 'fontWeight', (info.doctorFontWeight) || 'normal');
            return Obj;
        }
      }
    },

    // 获取当前患者号别或原科室
    getParentRegisterObjName() {
      const self = this;
      let {checkList, registerObjNameKey, registerSource, relationRegister} = (self.optionsInfo);
      let boolean = checkList.includes(2);
      let boolean2 = checkList.includes(1);
      let listInfo = (this.getRoomDoctorInfo);
      let roomDeptInfo = (this.getRoomDeptInfo);
      if (boolean) {
        // 号别来源当前医生呼叫的患者
        if (registerSource === 2) {
          if (!!(listInfo?.length)) {
            let patientList = Array();
            if (listInfo[0]?.treatingPatient?.length) {
              patientList = listInfo[0].treatingPatient
            } else if (listInfo[0]?.preTreatingPatient?.length) {
              patientList = listInfo[0].preTreatingPatient
            } else {
              patientList = Array()
            }
            if (patientList?.length) {
              let registerObjNameInfo = Array();
              patientList.forEach((item) => {
                let temp = (item[registerObjNameKey] || item['registerObjName']);
                if (!!temp) {
                  registerObjNameInfo.push(temp)
                }
              })
              // 去重
              let registerObjName = self.$lodash.compact(registerObjNameInfo);
              if (!!registerObjName && !!(registerObjName.length)) {
                return self.$lodash.uniq(registerObjName).join(',')
              }
            } else {
              return '\u00a0'
            }
          } else {
            if (relationRegister) {
              return (roomDeptInfo?.registerObjName) || '\u00a0'
            } else {
              return '\u00a0'
            }
          }
        } else {
          // 号别来源当前医生所在科室号别
          return (roomDeptInfo?.registerObjName) || '\u00a0'
        }
      } else if (boolean2) {
        return '\u00a0'
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row?.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    getDeptHideClassName() {
      let {checkList, deptRoomPosition} = (this.optionsInfo);
      if (checkList && (checkList.length === 1) && checkList[0] === 3) {
        return 'dept-room-hideDept'
      } else {
        if (deptRoomPosition) {
          return 'dept-room-position'
        }
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let {waitMode, waitingPatientHide} = (this.optionsInfo);
      return function (type, row) {
        let waitLen = row?.waitingPatientList?.length || 1
        if (!waitingPatientHide) {
          switch (type) {
            case 'current-patient':
              return parseInt(waitMode) !== 1 ? 'current-patient' : 'current-patient2'
            case 'wait-patient':
              switch (waitMode) {
                case 1:
                  return 'wait-patient'
                case 2:
                  return 'wait-patient2'
                case 3:
                  return 'wait-patient3'
                case 4:
                  return 'wait-patient4'
              }
          }
        } else {
          return 'hide-waiting-patient'
        }
      }
    },

    // 候诊等待
    getWaitPatientNumber() {
      return function (row, scroll) {
        let waitingPatientList = this.getWaitingPatientList(row);
        if (scroll) {
          if (Array.isArray(waitingPatientList)) {
            return `scroll-area-${waitingPatientList.length}`
          } else {
            return `scroll-area`
          }
        } else {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList.length >= 4) {
              return `no-scroll-area-4`
            } else {
              return `no-scroll-area-${waitingPatientList.length}`
            }
          } else {
            return `no-scroll-area`
          }
        }
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      let list = devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
      if (!!(list?.length)) {
        return list.slice(0, 1);
      } else {
        return [{}];
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 科室可能因为医生是否登录会有差异
    getRoomDiffInfo() {
      let list = (this.getRoomDoctorInfo);
      let deptInfo = (this.getRoomDeptInfo)
      if (list?.length) {
        return list[0].deptName || deptInfo?.deptName || '\u00a0'
      } else {
        return deptInfo?.deptName || '\u00a0'
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let {waitPatientType, waitMode, waitPatientNumber} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            return (!!row && !!(row?.length)) ? row.slice(0, waitMode) : []
          case 2:
            return (!!row && !!(row?.length)) ? row.slice(0, waitPatientNumber) : []
        }
      }
    },


    //截取字符串长度
    sliceStrInfo() {
      return function (str, number) {
        if (str?.length) {
          return (str?.length > number) ? str.slice(0, number) : str;
        } else {
          return '\u00a0';
        }
      }
    }
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.states = true;
          buildParent.executeParentMethod('writeLog', JSON.stringify({
            sign: '模板日志-科室信息',
            key: key,
            data: data
          }));
          this.$store.dispatch('setRoomDeptInfo', data)
          break
        case "roomDoctorInfo":
          this.states = true;
          buildParent.executeParentMethod('writeLog', JSON.stringify({
            sign: '模板日志-医生信息',
            key: key,
            data: data
          }));
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
      }
    },

    // 滚动结束
    handleScrollEnd(e,mode) {
      if(mode=='curr'){
        this.currKey = uuid()
      }else {
        this.widgetKey = uuid()
      }
    },

    handleError(event) {
      const loadedImg = event.target;
      this.states = false;
    }
  },


  watch: {
    field: {
      handler: function (val) {
        const self = this;
        self.$nextTick(() => {
          self.widgetKey = uuid();
          let key = val.options.config;
          self.optionsInfo = val.options[key];
        })
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
.scene-DRC-info4-widget {
  padding: 28px 0;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;
  //科室
  .dept {
    //width: 98%;
    height: 160px;
    background-color: rgba(2, 26, 33, 1);
    color: white;
    font-size: 88px;
  }

  // 诊室号/诊室
  .room {
    width: calc(94%);
    font-size: 160px;
    color: white;
    height: 190px;
    margin-top: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid white;
    box-sizing: border-box;
    margin-left: auto; /* 新增 */
    margin-right: auto; /* 新增 */
  }

  // 医生相关信息
  .doctor-info {
    height: 366px;
    min-width: auto;

    .name {
      font-size: 120px;
      height: 180px;
      color: white;
      border-bottom: 2px solid white;
      box-sizing: border-box;
      width: calc(94%);
      margin-left: auto; /* 新增 */
      margin-right: auto; /* 新增 */
    }
    .degree {
      font-size: 120px;
      height: 180px;
      color: rgba(253, 255, 0, 1);
      border-bottom: 2px solid white;
      box-sizing: border-box;
      width: calc(94%);
      margin-left: auto;
      margin-right: auto;
    }
  }

  // 患者信息
  .patient-info {
    .item {
      display: flex;
      overflow: hidden;
      .title {
        color: rgba(0, 252, 255, 1);
        background: transparent;
        align-items: center;
        align-self: center;
        text-align: center;
        height: 100%;
        line-height: 1.15;
        padding: 0 30px;
        flex: inherit;
        display: flex;
        width: 260px !important;
        font-size: 90px;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: center;
        justify-content: left;
        background: transparent;
        border: none;
        overflow: hidden;
        width: calc(100% - 260px) !important;

        p {
          font-size: 126px;
          width: 100%;
          line-height: 176px;
          text-align: left;
          padding-left: 60px;
          @include singleEllipsis(100%)
        }

        :deep(.scroll) {
          width: 100%;
          min-height: 320px;
          overflow: hidden;

          .inside-content {
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            overflow: hidden;

            .patient {
              height: auto;
              flex-basis: 50%;
              min-width: 50%;
              box-sizing: border-box;
              overflow: hidden;
              font-size: 80px;
              line-height: 116px;
              text-align: left;
              padding-left: 30px;
              color: white;
              @include singleEllipsis(100%);
            }
          }

          .scroll-area-1-1 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 120px;
              text-align: center;
              box-sizing: border-box;
              padding-left: 60px;
              line-height: 188px !important;
            }
          }

          .scroll-area-2-2 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 100px;
              text-align: center;
              box-sizing: border-box;
              line-height: 148px !important;
            }
          }
        }

        .no-scroll-area-1 {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            flex-basis: 100%;
            min-width: 100%;
            font-size: 120px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 188px !important;
          }
        }

        .no-scroll-area-2 {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          width: 100%;

          p {
            flex-basis: 100%;
            min-width: 100%;
            font-size: 90px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 148px !important;
          }
        }

        .no-scroll-area-3,
        .no-scroll-area-4 {
          display: flex;
          flex-wrap: wrap;

          p {
            flex-basis: 50%;
            min-width: 50%;
            font-size: 76px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 30px;
            line-height: 128px !important;
          }
        }

      }
      .current-patient-info {
        height: 100%;
        display: flex;
        align-self: center;
        align-items: center;

        .scroll-info {
          width: 100%;
          overflow: hidden;
          margin-top: 10px;
          height: calc(100%);
          box-sizing: border-box;

          p {
            height: 100%;
            width: 100%;
            display: flex;
            font-size: 90px;
            line-height: 150px;
            align-items: flex-start;
            @include singleEllipsis(100%)
          }
        }
      }

      .scroll-area-all {
        align-items: start;
        align-self: auto;
      }
    }

    .current-patient {
      height: 330px;
      border-bottom: 2px solid white;
      box-sizing: border-box;
      width: calc(94%);
      margin-left: auto; /* 新增 */
      margin-right: auto; /* 新增 */

      .title {
        font-size: 90px;
      }

      p {
        color: white;
      }
    }

    .wait-patient { // 修改高度
      height: 330px;
      margin-bottom: 44px;
      min-width: auto;
      box-sizing: border-box;

      .title {
        font-size: 80px;
      }

      p {
        color: white;
        line-height: 186px !important;
      }
    }

    .wait-patient2 {
      height: 330px;
      border-bottom: 2px solid white;
      box-sizing: border-box;

      p {
        line-height: 148px !important;
        font-size: 90px !important;
      }
    }

    .wait-patient3,
    .wait-patient4 {
      height: 330px;
      border-bottom: 2px solid white;
      box-sizing: border-box;

      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        p {
          flex-basis: 50%;
          font-size: 76px;
          text-align: center;
          line-height: 128px !important;
          @include singleEllipsis(100%)
        }
      }


    }
  }

  .patient-info-2,
  .patient-info-3,
  .patient-info-4 {
    .flex-box {
      flex-direction: row-reverse;

      :deep(.current-patient-info) {
        .scroll-info {
          p.item {
            justify-content: center;
          }
        }

      }

      :deep(.no-scroll-info) {
        justify-content: center;
        text-align: center !important;
      }
    }

    .wait-patient,
    .wait-patient1,
    .wait-patient2,
    .wait-patient3 {
      :deep(.content) {
        p {
          text-align: center;
          padding-left: 0;
        }
      }
    }
  }
}
</style>

